<template>
	<view class="content">
		<block v-for="(item,index) in styleConfig" :key="index">
			<header_serch v-if="item.name == 'a_headerSerch'" :dataConfig="item"></header_serch>
			<z_tabBar v-if="item.name == 'z_tabBar'" :pagePath="'/pages/index/index'" :dataConfig="item"></z_tabBar>
			<swiper_bg v-if="item.name== 'b_swiperBg'" :dataConfig="item"></swiper_bg>
			<menus v-if="item.name == 'c_menus'" :dataConfig="item"></menus>
			<news v-if="item.name == 'd_news'" :dataConfig="item"></news>
			<recommend v-if="item.name == 'g_recommend'"  :dataConfig="item" ></recommend>
		</block>
	</view>
</template>

<script>
	
	import {getDiy} from '@/api/api.js'
	
	import header_serch from './components/headerSerch.vue';
	import z_tabBar from './components/z_tabBar.vue';
	import swiper_bg from './components/swiperBg.vue';
	import menus from './components/menus.vue';
	import news from './components/news.vue';
	import recommend from './components/recommend.vue';
	
	export default {
		components:{
			z_tabBar,
			header_serch,
			swiper_bg,
			menus,
			news,
			recommend
		},
		data() {
			return {
				title: 'Hello world',
				styleConfig:[]
			}
		},
		onLoad() {
			this.diyData();
		},
		methods: {
			// 对象转数组
					objToArr(data) {
						let obj = Object.keys(data);
						let m = obj.map(function(key) {
							data[key].name = key;
							return data[key];
						});
						return m;
					},
			diyData(){
				getDiy().then(res=>{
					this.styleConfig = this.objToArr(res.data.data);
				})
			}
		},
		
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	
</style>
